<template>
<div class="add-cate-container">
  <div class="top-header">
    <a-steps
        :current="steepConfig.currentSteep"
        :items="steepConfig.items"
    >
<!--      提交失败时候显示-->
      <a-step status="error" v-if="steepConfig.currentSteep == '3' && !responseStatus" title="提交失败" description="提交失败请稍后重试"></a-step>
    </a-steps>
  </div>
  <a-divider />
    <div class="steep-item" v-if="steepConfig.currentSteep == '1' ">
    <h3 class="edit-cate-title">填写分类信息</h3>
    <a-form layout="vertical" :model="formState">
      <a-form-item label="分类名称">
        <a-input v-model:value="formState.cateName" placeholder="填写新增的分类名称" />
      </a-form-item>
      <a-form-item label="分类描述">
        <a-input v-model:value="formState.cateDesc" placeholder="新增分类描述" />
      </a-form-item>
      <a-form-item label="是否是根节点">
        <a-radio-group v-model:value="formState.isParentRoot" @change="radioChange">
          <a-radio :value="0">否</a-radio>
          <a-radio :value="1">是</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="所属父级" v-if="!formState.isParentRoot">
        <a-tree-select
            v-model:value="formState.cateParentId"
            show-search
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="Please select"
            allow-clear
            tree-default-expand-all
            :tree-data="treeData"
            tree-node-filter-prop="label"
            @change="selectChange"
        ></a-tree-select>
      </a-form-item>
      <a-form-item label="别名">
        <a-input v-model:value="formState.cateAlias" placeholder="分类别名"/>
      </a-form-item>
      <a-form-item class="btns">
        <a-button type="primary" @click="onSubmit">下一步</a-button>
        <a-button style="margin-left: 10px" @click="resetFormData">重置表单</a-button>
      </a-form-item>
    </a-form>
  </div>
  <!-- 第二步 -->
  <div class="steep-item" v-else-if="steepConfig.currentSteep == '2' ">
    <a-descriptions size="default"  title="确认信息" bordered>
      <a-descriptions-item label="分类名称" >{{ formState.cateName }}<br/></a-descriptions-item>
      <a-descriptions-item label="分类描述">{{ formState.cateDesc }}<br/></a-descriptions-item>
      <a-descriptions-item label="是否为根节点"><a-badge :status="formState.isParentRoot == 0 ? 'error' : 'processing' " :text="formState.isParentRoot == 0 ? '否' : '是'" /></a-descriptions-item>
      <a-descriptions-item v-if="formState.isParentRoot == 0" label="当前节点">{{ formState.cateParentId }}</a-descriptions-item>
      <a-descriptions-item label="别名">
        {{ formState.cateAlias }}
      </a-descriptions-item>
    </a-descriptions>
    <div class="utils-btns">
      <a-button type="default" class="prev" @click="steepConfig.currentSteep = '1'">上一步</a-button>
      <a-button type="primary" class="submit-btn" :loading="loading" @click="submitHandler">提交</a-button>
    </div>
  </div>
  <!-- 第三步 -->
  <div class="steep-item" v-else-if="steepConfig.currentSteep == '3' && responseStatus ">
    <a-result
      status="success"
      title="新增分类成功!"
      sub-title="增加分类成功 请前往分类列表查看"
    >
      <template #extra>
         <a-button key="console" type="primary" @click="router.push({path:'/cates'})">前往列表查看</a-button>
        <a-button key="buy" @click="reEdit">继续提交</a-button>
      </template>
    </a-result>
  </div>
  <div class="steep-item" v-else-if="steepConfig.currentSteep == '3' &&  !responseStatus">
    <a-result
    status="error"
    title="提交分类失败!"
    sub-title="Please check and modify the following information before resubmitting."
  >
    <template #extra>
      <a-button key="console" type="primary" @click="reEdit">重新编辑</a-button>
    </template>
  </a-result>
  </div>
</div>
</template>

<script lang="ts" setup>
import {reactive, ref,toRaw,onMounted} from "vue";
import type { UnwrapRef } from 'vue';
import {getTagCate} from '@/api/article'
import {addCate} from '@/api/cate'
import {translateTree} from '@/utils/utils'
import {message} from "ant-design-vue";
import router from "@/router";


let steepConfig = reactive<{
  items:Array<{title:string,description:string}>,
  currentSteep:string
}>({
  items:[{
      title: '编辑信息', description: '编辑新增分类信息'}, {
      title: '确认信息', description: 'confirm'}, {
      title: '提交', description: '确认提交分类'
  }],
  currentSteep:'1'
})


interface FormState {
  cateName: string;
  cateDesc: string;
  cateAlias: string;
  cateParentId: number|string;
  isParentRoot:number //是否是顶级节点 1代表顶级节点
}
const formState: UnwrapRef<FormState> = reactive({
  cateName: '',
  cateDesc: '',
  cateAlias: '',
  cateParentId: '',
  isParentRoot:0
});
// 下一步提交表单
const onSubmit = () => {
  checkUserInput()
};

let selectChange = (value:string|number,label:string|number,extra:string|number) => {
  formState.cateParentId = value
}

// 检验用户输入进入下一步
function checkUserInput(){
  if(formState.cateName == '') return message.error('分类名称不能为空')
  if(formState.cateDesc == '') return message.error('简介不能为空')
  if(formState.isParentRoot == 0 && formState.cateParentId == '') return message.error('父级分类不能为空')
  formState.isParentRoot == 0 ? formState.cateParentId = formState.cateParentId : formState.cateParentId = 0
  //   进入下一步
  steepConfig.currentSteep = '2'
}

// 提交表单
let responseStatus = ref<boolean>(false)
let loading = ref<boolean>(false)
let submitHandler = async () => {
  loading.value = true
  try {
    let res:any = await addCate(formState)
    if(res.code !== 200) return message.error(res.message)
    steepConfig.currentSteep = '3'
    loading.value = false
    responseStatus.value = true
    message.success(res.message)
    resetFormData()
  }catch(e:any){
    steepConfig.currentSteep = '3'
    loading.value = false
    message.error(e.message)
  }
}

// 重置表单
const resetFormData = () => {
  for(let key in formState){
    //@ts-ignore
    formState[key] = ''
    if(key == 'isParentRoot'){
      formState[key] = 0
    }
  }
}
// 单选发生改变
let radioChange = (radio:any) => {
  // console.log('发生改变',radio,formState.isParentRoot)
  if(radio.target.value == 1) {
    formState.cateParentId = 0 // 证明当前选中的时根节点为父级元素
  }
}

// 父级选择树级数据
let treeData = ref([])
const getTagCateList = async () => {
  try {
    let res:any = await getTagCate()
    if(res.code !== 200) return message.error(res.message)
    treeData.value = translateTree(res.cates,0)
    console.log(treeData)
  }catch (e:any) {
    message.error(e.message)
  }
}

// 重新编辑
let reEdit = () => {
  responseStatus.value = false
  steepConfig.currentSteep = '1'
  resetFormData()
  getTagCateList()
}


onMounted(() => {
  getTagCateList()
})



</script>

<style lang="scss" scoped>
.add-cate-container {
  padding: 10px;
}
.top-header {
  margin: 20px auto;
}
.steep-item {
  max-width: 750px;
  margin: 20px auto;
  .edit-cate-title {
    margin: 20px 0px;
    font-weight: bolder;
    font-size: 18px;
  }
  ::v-deep .ant-form-item-label >label {
    min-width: 75px;
  }
  ::v-deep .ant-form-item-control-input-content .ant-input {
  }
  ::v-deep .btns {
    text-align: center;
  }
  .utils-btns {
    text-align: center;
    margin-top: 20px;
    .prev {
      margin-right: 20px;
    }
  }
}

.fade-enter-from,.fade-leave-to {
  opacity: 0;
  transform: translateX(-50%);
}

.fade-enter-to,.fade-leave-from {
  opacity: 1;
  transform: translateX(0px);
}

.fade-enter-active,.fade-leave-active {
  transition: .1s all ease-in;
}

</style>
